<template>
  <div class="user">
    <div class="header">
      <div class="left">
        <h1>Dadiel Hua</h1>
        <h3 @click="newinfoHandle">查看和编辑</h3>
      </div>
      <div class="right">
        <van-image
          round
          width="4rem"
          height="4rem"
          src="http://img.wxcha.com/m00/f0/f5/5e3999ad5a8d62188ac5ba8ca32e058f.jpg"
        />
      </div>
    </div>
    <div class="body">
      <div class="main1" @click="changepwdHandle">
        <span>修改密码</span>
        <i class="fa fa-key"></i>
      </div>
      <div class="main1">
        <span>积分&优惠券</span>
        <i class="fa fa-gift"></i>
      </div>
      <div class="main1">
        <span>帮助中心</span>
        <i class="fa fa-question-circle"></i>
      </div>
      <div class="main1">
        <span>支付</span>
        <i class="fa fa-credit-card-alt"></i>
      </div>
      <div class="main1">
        <span>设置</span>
        <i class="fa fa-cog"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "User",
  methods: {
    newinfoHandle() {
      this.$router.push({
        name: "NewInfo",
      });
    },
    changepwdHandle() {
      this.$router.push({
        name: "ChangePwd",
      });
    },
  },
};
</script>

<style scoped>
.user {
  display: flex;
  flex-direction: column;
}
.header {
  display: flex;
  width: 90%;
  margin: 5rem auto 2rem;
}
.left {
  width: 70%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.right {
  margin: 0 auto;
}
.left h1 {
  font-size: 1.5rem;
}
.left h3 {
  font-size: 0.8rem;
  color: #ccc;
  margin-top: 0.5rem;
}
.main1 {
  font-size: 0.9rem;
  height: 1.2rem;
  border-bottom: 1px solid #ccc;
  width: 90%;
  margin: 0 auto;
  padding: 1.7rem 0;
  color: #ccc;
  line-height: 1.2rem;
}
.main1 span {
  float: left;
  color: #000;
}
.main1 i {
  float: right;
}
</style>
